<template>
  <div>
    <div class="container">
      <!-- 面包屑区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 商品管理内容展示区 -->
      <el-card>
        <!-- 商品管理表格 -->
        <el-table :data="orderData" :rules="rules" tooltip-effect="dark" style="width: 100%" id="el-table">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="serialNumber" label="编号" width="100" align="center"></el-table-column>
          <el-table-column prop="name" label="商品" width="120" align="center"></el-table-column>
          <el-table-column prop="type" label="商品类型" width="180" align="center"></el-table-column>
          <el-table-column prop="orderTotal" label="订单总量" width="80" align="center"></el-table-column>
          <el-table-column prop="orderTotalPrice" label="订单总价" width="120" align="center"></el-table-column>
          <el-table-column prop="recipient" label="收件人" width="120" align="center"></el-table-column>
          <el-table-column prop="phoneNumber" label="手机号" width="120" align="center"></el-table-column>
          <el-table-column prop="address" label="收件地址" width="180" align="center"></el-table-column>
          <el-table-column prop="message" label="留言" width="120" align="center"></el-table-column>
          <el-table-column label="操作" width="180" align="center" fixed="right">
            <el-button size="mini">编辑</el-button>
            <el-button size="mini">删除</el-button>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next"
            :total="orderData.length">
          </el-pagination>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyOrder',
  data() {
    return {
      currentPage: 5,
      orderData: [
        {
          serialNumber: '0001',
          name: '摆动式洒水器',
          type: '轻工及日用',
          orderTotal: '100',
          sellingPrice: '10',
          orderTotalPrice: '9999',
          recipient: '罗一一',
          phoneNumber: '13000000001',
          address: '江西信息应用职业技术学院',
          message: '老王最帅'
        },
        {
          serialNumber: '0002',
          name: '摆动式洒水器',
          type: '轻工及日用',
          orderTotal: '100',
          sellingPrice: '10',
          orderTotalPrice: '9999',
          recipient: '罗一一',
          phoneNumber: '13000000001',
          address: '江西信息应用职业技术学院',
          message: '老王最帅'
        },
        {
          serialNumber: '0003',
          name: '摆动式洒水器',
          type: '轻工及日用',
          orderTotal: '100',
          sellingPrice: '10',
          orderTotalPrice: '9999',
          recipient: '罗一一',
          phoneNumber: '13000000001',
          address: '江西信息应用职业技术学院',
          message: '老王最帅'
        },
        {
          serialNumber: '0004',
          name: '摆动式洒水器',
          type: '轻工及日用',
          orderTotal: '100',
          sellingPrice: '10',
          orderTotalPrice: '9999',
          recipient: '罗一一',
          phoneNumber: '13000000001',
          address: '江西信息应用职业技术学院',
          message: '老王最帅'
        },
      ],
      rules: {
        phoneNumber: [{ required: true, pattern: /^(\d{3})\d{4}(\d{4})$/ }]
      }
    }
  },
}
</script>

<style lang='scss' scoped>
@import '@/assets/theme/handle.scss';

* {
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

.el-card__body {
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');


}

#el-table {
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
  border: 1px solid red;
}
</style>